import React, { Component } from 'react'
import { connect } from 'react-redux'

class OnlineTeacherItem extends Component {
  render() {
    const { teacher, index, recordingIds } = this.props
    const isRecording = recordingIds.indexOf(teacher.id) >= 0
    const animate = isRecording ? ' pulse-button' : ''
    const margin = index === 0 ? ' marginleft0' : ''
    const className = 'teacher_item' + animate + margin
    return (
      <div className={className}>
        <img className="teacher_item_image" src={teacher.headimgurl} alt="" />
        <div className="teacher_item_point"></div>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    recordingIds: state.OnlineTeacherState.recordingIds
  }
}

export default connect(mapStateToProps)(OnlineTeacherItem)
